<!--上传文件-->
<template>
  <zh-form-item
      :ref="prop"
      :label="label"
      :prop="prop"
      :span="span"
      :md="md"
      :sm="sm"
      :xs="xs"
      :lg="lg"
      :xl="xl"
      :offset="offset"
      :push="push"
      :pull="pull"
      :tag="tag"
  >
    <zh-upload
        v-model="value"
        v-model:file-list="myFileList"
        v-bind="allAttrs"
        :returnType="props.returnType"
        :modelType="props.modelType"
        :disabled="getDisabled"
        @on-change="myChange"
        :fileNamePrefix="props.fileNamePrefix"
    >
       <template #[item]="data" v-for="item in Object.keys($slots)">
        <slot :name="item" v-bind="data || {}"></slot>
      </template>
    </zh-upload>
    
  </zh-form-item>
 
</template>

<script lang="ts" setup>
// 引入组件需要的属性、控制类
import {itemProps, itemController, formItemProps} from '../lib/mapController';


// 定义属性
const props = defineProps({
  ...formItemProps,
  ...itemProps, // 基础属性
  //返回类型：url showId
  returnType: {
    type: String,
    default: 'showId',
  },
  //返回格式 string 字符串 多个用英文逗号隔开，array 数组
  modelType: {
    type: String,
    default: 'string',
  },
  modelValue: [String, Array],
  fileList: [Object, Array],
  //文件名前缀
	fileNamePrefix: {
		type: String,
		default: '初始化图片',
	},
});
const attrs = useAttrs();
const emit = defineEmits(['update:modelValue','update:file-list', 'on-change', 'before-upload']);
const allAttrs = computed(() => {
  return Object.assign(props.extend, attrs);
});
const {value} = itemController(props, allAttrs.value, emit);
const myFileList = ref([] as any);
let golbalProps: any = inject('golbalProps', {});
//获取可编辑设置
const getDisabled =  computed(() => {
  if (props.disabled === null || props.disabled === undefined) {
    return golbalProps.disabled;
  } else {
    return props.disabled;
  }
})
const myChange = (fileList) => {
  emit('update:file-list', myFileList.value);
  emit('on-change', fileList);
};
watch(
	() => props.modelValue,
	() => {
    value.value=props.modelValue
	},
	{
		deep: true,
	}
);
watch(
	() => props.fileList,
	() => {
		myFileList.value=props.fileList
	},
	{
		deep: true,
	}
);
</script>
<script lang="ts">
// 声明额外的选项
export default {
  name: 'zh-form-upload',
  inheritallAttrs: false,
};
</script>
<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>
